<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html class="no-js" lang="en" >

<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>e-shopping</title>

	<!-- Stylesheet
	================================================== -->
	<link rel="stylesheet" href="style.css">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

	<script src="js/vendor/custom.modernizr.js"></script>

	<!-- Demo Examples -->
	<link rel="alternate stylesheet" type="text/css" href="css/red.css" title="red" media="all" />
	<link rel="alternate stylesheet" type="text/css" href="css/blue.css" title="blue" media="all" />
	<link rel="alternate stylesheet" type="text/css" href="css/green.css" title="green" media="all" />
	<!-- END Demo Examples -->
    
	<style>
    #themeswitcher {
        background-color: #FFFFFF;
        border: 1px solid #D1D1D1;
        height: 78px;
        overflow: hidden;
        padding: 5px 10px;
        position: fixed;
        right: 0;
        top: 150px;
        width: 40px;
        z-index: 999;
    }
    
    </style>

</head>
<body>

	<header class="row">
       <div class="large-4 columns">
            <div class="logo">
				<a href="index.html"><img width="150" src="images/logo.png" alt=""></a>
            </div><!-- End Logo -->  
        </div>
        
        <div class="large-4 columns">
            <ul class="top-menu">
                <li><a href="login.html"><i class="fa fa-user"></i> Compte</a></li>
                <li><a href="login.html"><i class="fa fa-unlock"></i> Inscription</a></li>
                <li><a href="cart.html"><i class="fa fa-shopping-cart"></i> 0 articles - $0</a></li>
            </ul>
        </div>
         
        <div class="large-4 columns">
            <ul class="dm-social">
                <li><a href="https://www.facebook.com/" class="fa fa-facebook" title="Facebook">Facebook</a></li>
                <li><a href="https://plus.google.com/‎" class="fa fa-google-plus" title="Google+">Google+</a></li>
                <li><a href="#" class="fa fa-twitter" title="Twitter">Twitter</a></li>
                <li><a href="#" class="fa fa-pinterest" title="Pinterest">Pinterest</a></li>
                <li><a href="#" class="fa fa-linkedin" title="Linkedin">Linkedin</a></li>
                <li><a href="#" class="fa fa-rss" title="Feedburner">RSS</a></li>
            </ul><!-- End Social --> 
        </div>
	</header>

	<div class="wrapper row">
   
		<div class="large-4 columns">
			<aside class="sidebar">
                <nav class="menu clearing-container">
					<ul>
						<li><a href="index.html"><i class="fa fa-home"></i> Accueil</a></li>
						<li><a href="#"><i class="fa fa-book"></i> e-shopping</a>
                        <ul>
                            <li><a href="about.html">A propos de nous</a></li>
                            <li><a href="services.html">Services</a></li>
                            <li><a href="sitemap.html">Site map</a></li>
                            <li><a href="login.html">Compte</a></li>
                            <!--li><a href="404.html">Not Found</a></li>
                            <li><a href="fullwidth.html">Full Width</a></li>
                            <li><a href="page.html">Standard Page</a></li-->
                        </ul>				
						</li>
						<li><a href="portfolio.html"><i class="fa fa-camera-retro"></i> Nouveautés</a>
                        <ul>
                            <!--li><a href="portfolio.html">Catalague</a></li-->
                            <!--li><a href="portfolio-two.html">Portfolio Two Columns</a></li-->
                            <li><a href="portfolio-three.html">Nouveau catalogue</a></li>
                            <!--li><a href="single-portfolio-slider.html">Portfolio Slider</a></li>
                            <li><a href="single-portfolio-video.html">Portfolio Video</a></li>
                            <li><a href="single-portfolio.html">Portfolio Image</a></li-->
                        </ul>				
						</li> 
						<li><a href="shop.html"><i class="fa fa-shopping-cart"></i> Boutique</a>
                        <ul>
                            <li><a href="shop.html">Catalogue</a></li>
                            <li><a href="cart.html">Mon panier</a></li>
                            <li><a href="checkout.html">Caisse</a></li>
                            <li><a href="single-shop.html">Détails</a></li>
                        </ul>				
						</li>
						<li><a href="#"><i class="fa fa-th-large"></i> Catégories</a>
                        <ul>
						<!--li><a href="shortcodes.html">Shortcodes</a></li>
						<li><a href="typography.html">Typography</a></li--> 
						<li><a href="#">CatégorieA</a>
							<ul>
								<li><a href="shop.html">sous CatégorieA1</a></li>
								<li><a href="shop.html">sous CatégorieA2</a></li>
							</ul>
						</li>
						<li><a href="#">CatégorieB</a>
							<ul>
								<li><a href="shop.html">sous CatégorieB1</a></li>
								<li><a href="shop.html">sous CatégorieB2</a></li>
							</ul>
						</li>
						<li><a href="#">CatéforieC</a>
							<ul>
								<li><a href="#">sous CatégorieC1</a></li>
								<li><a href="#">sous CatégorieC2</a></li>
							</ul>
						</li>
                        </ul>
                        </li>
						<li><a href="blog.html"><i class="fa fa-edit"></i> Blog</a>
                        <ul>
                            <li><a href="blog.html">Page Blog </a></li>
                            <li><a href="single.html">Poster</a></li>
                        </ul>				
						</li> 
						<li><a href="contact.html"><i class="fa fa-envelope"></i> Contact</a></li>
						<li><a href="forum.html"><i class="fa fa-comments"></i> Forum</a></li>
					</ul>
				</nav><!-- End Menu -->
                
                <div class="widget clearing-container">
                    <h3 class="widget-title">
                        <span>A propos de e-shopping</span>
                    </h3>
					<p><em><strong>e-shopping</strong> Grâce à une équipe de passionnés constamment à la recherche des innovations et des tendances de consommation, le site a démocratisé l’accès à de nombreux produits et au e-commerce en général</em></p>
                </div>

                <div class="widget clearing-container">
                    <h3 class="widget-title">
                        <span>Récent </span>
                    </h3>
                        <div class="slider">
                            <div class="widget-slider">
                                <ul class="entry slides">
                                <li>
                                    <a href="#"><img src="img/01_portfolio.jpg" alt="" /><span class="magnifier"></span></a>
                                </li>
                                <li>
                                    <a href="#"><img src="img/02_portfolio.jpg" alt="" /><span class="magnifier"></span></a>
                                </li>
                                <li>
                                    <a href="#"><img src="img/03_portfolio.jpg" alt="" /><span class="magnifier"></span></a>
                                </li>
                                </ul>
                            </div>
                        </div><!-- End Slider Widget -->
				</div>

          
                <div class="widget clearing-container">
                    <h3 class="widget-title">
                        <span>Informations</span>
                    </h3>
                        <ul>
                            <li><a title="View all posts filed under News" href="#">Nouvelles</a> (3)</li>
                            <li><a title="View all posts filed under Magazine" href="#">Magazins</a> (4)</li>
                            <li><a title="View all posts filed under Shopping" href="#">Livraison procédure</a> (12)</li>
                            <li><a title="View all posts filed under Graphic" href="#">Graphique</a> (12)</li>
                            <li><a title="View all posts filed under Updates" href="#">Mise à jour</a> (7)</li>
                        </ul>
                </div>
                                
			</aside><!-- End Sidebar -->
		</div><!-- end large 4 -->

		<div class="large-8 columns">

			<div class="row">
				<div class="large-12 columns">
				<div class="slider">
					<div class="flexslider">
						<ul class="slides">
                        <li>
                            <a href="#"><img src="img/01_slider.png" alt="" /></a>
                            <h3 class="flex-title">Businessman at the workplace</h3>
                            <p class="flex-caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="single-services.html">read more →</a></p>
                        </li>
                        <li>
                            <a href="#"><img src="img/02_slider.png" alt="" /></a>
                            <h3 class="flex-title">Success business report</h3>
                            <p class="flex-caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </li>
                        <li>
                            <a href="#"><img src="img/03_slider.png" alt="" /></a>
                            <h3 class="flex-title">Businessman working with documents</h3>
                            <p class="flex-caption">Lorem Ipsum is simply dummy text.</p>
                        </li>
						</ul>
					</div>
				</div><!-- End Slider -->
                
                <div class="services clearfix">
                    <div class="box large-4 columns">
                    <h3 class="widget-title">
                    <span><i class="fa fa-laptop"></i> Responsive Design</span>
                    </h3>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="single-services.html">read more →</a> </p>
                    </div>
                    <div class="box large-4 columns">
                    <h3 class="widget-title">
                    <span><i class="fa fa-shopping-cart"></i> eCommerce Ready</span>
                    </h3>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="single-services.html">read more →</a> </p>
                    </div>
                    <div class="box large-4 columns">
                    <h3 class="widget-title">
                    <span><i class="fa fa-heart"></i> Awesome Support</span>
                    </h3>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="single-services.html">read more →</a> </p>
                    </div>
                </div><!-- end services -->
                
                <div class="works clearfix">
                    <div class="box large-12 columns">
                        <h3 class="widget-title">
                        <span>Recent Works</span>
                        </h3>
                    </div>
                    <div class="homeportfolio large-4 columns">
                    <div class="entry">
                    <a data-gal="prettyPhoto" href="img/01_portfolio.jpg">
                        <img src="img/01_portfolio.jpg" alt="">
                        <span class="magnifier"></span>
                    </a>
                    </div>
                    <h3><a href="single-portfolio.html">Illustration of chalkboard with chalk.</a></h3>
                    </div>  
                    <div class="homeportfolio large-4 columns">
                    <div class="entry">
                    <a data-gal="prettyPhoto" href="img/03_portfolio.jpg">
                        <img src="img/02_portfolio.jpg" alt="">
                        <span class="magnifier"></span>
                    </a>
                    </div>
                    <h3><a href="single-portfolio.html">Illustration of chalkboard with chalk.</a></h3>
                    </div>  
                    <div class="homeportfolio large-4 columns">
                    <div class="entry">
                    <a data-gal="prettyPhoto" href="img/03_portfolio.jpg">
                        <img src="img/03_portfolio.jpg" alt="">
                        <span class="magnifier"></span>
                    </a>
                    </div>
                    <h3><a href="single-portfolio.html">Illustration of chalkboard with chalk.</a></h3>
                    </div>  
                </div><!-- end works -->
                
                <div class="homewidget clearfix">
                
                    <div class="box large-6 columns">
                        <h3 class="widget-title">
                            <span>Recent Posts</span>
                        </h3>
                        
                        <div class="homepost">
                            <div class="homeposttitle">
                                <h3>
                                    <i class="fa fa-pencil homeposticon"></i>
                                    <a href="single.html">Illustration of chalkboard with chalk.</a>
                                </h3>
                                <ul class="post-date clearfix">
                                    <li><i class="fa fa-calendar"></i> Oct 13, 2013</li>
                                    <li><i class="fa fa-user"></i> admin</li>
                                </ul>
                            </div>   
                        </div>
                        
                        <div class="homepost">
                            <div class="homeposttitle">
                                <h3>
                                    <i class="fa fa-film homeposticon"></i>
                                    <a href="single.html">Illustration of chalkboard with chalk.</a>
                                </h3>
                                <ul class="post-date clearfix">
                                    <li><i class="fa fa-calendar"></i> Oct 11, 2013</li>
                                    <li><i class="fa fa-user"></i> admin</li>
                                </ul>
							</div>   
                        </div>


                    </div>
                    
                    <div class="box large-6 columns">
                        <h3 class="widget-title">
                        <span>Clients Heureux</span>
                        </h3>
                        <ul class="clients">
                            <li class="entry"><a href="#"><img alt="Client #1" src="images/client.png"></a><span class="magnifier"></span></li>
                            <li class="entry"><a href="#"><img alt="Client #2" src="images/client.png"></a><span class="magnifier"></span></li>
                            <li class="entry"><a href="#"><img alt="Client #3" src="images/client.png"></a><span class="magnifier"></span></li>
                            <li class="entry"><a href="#"><img alt="Client #4" src="images/client.png"></a><span class="magnifier"></span></li>
                            <li class="entry"><a href="#"><img alt="Client #5" src="images/client.png"></a><span class="magnifier"></span></li>
                            <li class="entry"><a href="#"><img alt="Client #6" src="images/client.png"></a><span class="magnifier"></span></li>
                        </ul>
                    </div>
                    
                </div><!-- end homewidget -->
                
				</div><!-- large 12 -->
			</div><!-- end row -->
            
		</div><!-- end large 8 -->
	</div><!-- end wrapper -->


	<footer class="row">
		<div class="large-4 columns">
			<div class="widget">
                <div class="logo">
                    <a href="index.html"><img width="150" src="images/logo.png" alt=""></a>
                </div>
            </div>
        </div>
        
		<div class="large-4 columns">
			<div class="widget">
			<h3 class="widget-title">
				<span><i class="fa fa-quote-left"></i> Copyrights</span>
			</h3>                
            <p class="copyright">© 2012–2013 <a href="#">e-SHOPEN</a>, Inc. All rights reserved.</p>
            </div>
		</div>
        
        <div class="large-4 columns">
        <div class="widget">
			<h3 class="widget-title">
				<span><i class="fa fa-envelope"></i> Email Newsletter</span>
			</h3>
		<form id="subscribe">
          <div class="row">
            <div class="large-12 columns">
              <div class="row collapse">
                <div class="small-9 columns">
                  <input type="text" placeholder="Enter your email address">
                </div>
                <div class="small-3 columns">
                  <a href="#" class="button secondary prefix">S'inscrire</a>
                </div>
              </div>
            </div>
           </div>
        </form>
        </div>
        </div>

    <div class="dmtop">Scroll To Top</div>
    </footer>
    

	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    
	<div id="themeswitcher">
		<a href="#" rel="red" class="styleswitch"><img src="images/red.jpg" alt=""></a>	
		<a href="#" rel="blue" class="styleswitch"><img src="images/blue.jpg" alt=""></a>
		<a href="#" rel="green" class="styleswitch"><img src="images/green.jpg" alt=""></a>
	</div>
    
	<script type="text/javascript" src="switcher/fswit.js"></script>
    
	<script src="js/jquery.flexslider.js"></script>
    <script src="js/tinynav.min.js"></script>
	<script src="js/menu_min.js"></script>
	<script src="js/foundation.min.js"></script>
	<script src="js/jquery.prettyPhoto.js"></script>
	<script src="js/script.js"></script>

    
</body>
</html>